import { Button } from 'antd';
import bg2Img from '@assets/images/bg2.png';
import goldCoinsImg from '@assets/images/gold-coins.png';
import mmLogoImg from '@assets/images/mm-logo.png';
import iconGoogleLogoImg from '@assets/images/icon-google-logo.png';
import iconChromeLogoImg from '@assets/images/icon-chrome-logo.png';
import iconAppleLogoImg from '@assets/images/icon-apple-logo.png';
import appExImg from '@assets/images/app-ex.png';
import hashpayImg from '@assets/images/hashpay.png';
import homeLeftImg from '@assets/images/home-left.png';
import './index.less';

function Index() {
    const jumpTo = id => {
        document.querySelector('#' + id).scrollIntoView({
            behavior: 'smooth',
            block: 'center',
            inline: 'nearest'
        });
    };

    return (
        <div className="halo-home">
            <div className="home-con">
                <div className="introduce-con">
                    <img className="gold-coins-img" src={goldCoinsImg}></img>
                    <div className="introduce-word">
                        <div className="introduce-title">HALO Infinite Financial System</div>
                        <div className="introduce-text">
                            HALO INFINITI Financial System - <strong>HALO NETWORK </strong>
                            is an efficient blockchain network system. HALO NETWORK provide one stop
                            integration of DeFi application level with decentralized, energy
                            efficient and and low-cost transaction structure with traditional
                            financial instruments.
                        </div>
                    </div>
                </div>
                <div className="guide-con">
                    <div className="guide-card guide-card1">
                        <div className="guide-title">Build your DAPP</div>
                        <div className="guide-text">Explore the world of DEFI projects with</div>
                        <div className="guide-text2">3 easy steps.</div>
                    </div>
                    <div className="guide-card guide-card2">
                        <div className="guide-title2">Build your DAPP</div>
                        <div className="guide-text3">
                            <div>Support</div>
                            <div>HashPai & MATEMASK Wallet</div>
                        </div>
                        <Button
                            type="primary"
                            className="btn click-btn"
                            onClick={jumpTo.bind(this, 'down-wrap')}
                        >
                            CLICK
                        </Button>
                    </div>
                    <div className="guide-card guide-card2">
                        <div className="guide-title2">Get assets</div>
                        <div className="guide-text3">
                            <div>Convert selected coins via</div>
                            <div>HALO Bridge</div>
                        </div>
                        <Button
                            type="primary"
                            className="btn click-btn"
                            onClick={jumpTo.bind(this, 'bridge-con')}
                        >
                            CLICK
                        </Button>
                    </div>
                    <div className="guide-card guide-card2">
                        <div className="guide-title2">Explore projects on HALO System</div>
                        <Button type="primary" className="click-btn2">
                            Stay Tuned...
                        </Button>
                    </div>
                </div>
            </div>
            <div className="bridge-con-wrap">
                <img className="home-left-img" src={homeLeftImg}></img>
                <img className="home-left-img2" src={homeLeftImg}></img>
                <div className="bridge-con" id="bridge-con">
                    <div className="bridge-hd">
                        <div className="bridge-line"></div>
                        <div className="bridge-title">HALO Bridge</div>
                        <div className="bridge-text">
                            The HALO Bridge is a cross-chain bridging service that aims to increase
                            interoperability between different blockchains. HALO NETWORK was created
                            to help users transfer the digital assets such as BTC, ETH with the
                            <span className="introduce-text-red">
                                {' '}
                                safe, fast and most secure way
                            </span>{' '}
                            to HALO chains.
                        </div>
                    </div>
                    <div className="bridge-bt">
                        <img className="bg2-img" src={bg2Img}></img>
                        <Button type="primary" className="con-btn">
                            CONNECT
                        </Button>
                    </div>
                </div>
            </div>
            <div className="down-wrap" id="down-wrap">
                <div className="down-con">
                    <div className="down-title">GET YOUR WALLET</div>
                    <div className="down-left">
                        <img className="app-ex-img" src={appExImg}></img>
                        <div className="down-left-sup">
                            <img className="mm-logo-img" src={mmLogoImg}></img>
                            <div className="sup-text">Supported</div>
                            <div>
                                <img className="down-img" src={iconAppleLogoImg}></img>
                                <img className="down-img" src={iconGoogleLogoImg}></img>
                                <img className="down-img" src={iconChromeLogoImg}></img>
                            </div>
                        </div>
                    </div>
                    <div className="down-line">
                        <div className="down-line-l"></div>
                        <div className="down-line-t">or</div>
                        <div className="down-line-l"></div>
                    </div>
                    <div className="down-right">
                        <img className="hashpay-img" src={hashpayImg}></img>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Index;
